{% extends 'layout/indexframe.html' %}

{% block title %}center{% endblock %}

{% block css %}
    <style>
        li {
            list-style: none;
            padding: 0px;
            margin: 0px;
        }

        .account {
            width: 500px;
        {#border: 1px solid #dddddd;#}{#border-radius: 10px;#}{#box-shadow: 10px 10px 10px #aaa;#}{#padding: 20px 40px;#} margin-left: auto;
            margin-right: auto;
        {#margin-top: 100px;#}

        }

        .account h1 {
            margin-top: 10px;
            text-align: center;
        }

        .error-msg {
            color: red;
            position: absolute;
            font-size: 13px;
        }

        label {
            font-size: 20px;

        }

    </style>
{% endblock %}

{% block content %}
    <div class="account">
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            <h1 style="text-align: center;"><strong>用户界面</strong></h1>
            {% if userinfo.imgsrc %}
                <br>
                <div class="col-md-4" style="font-size: 50px">头像</div>
                <img src="{{ userinfo.imgsrc }}"  class="col-md-4"><br>
            {% else %}
                <br><div class="col-md-4" style="font-size: 50px"><h4>暂无头像</h4></div>
                <img src="/web/static/img/Null.jpg"  class="col-md-4"><br>
            {% endif %}

            <div class="form-group col-md-4">
                <label for="avatar">上传头像</label>
                <input type="file" class="form-control-file" name="avatar">
            </div>

            <div class="account">
                <div class="form-group">
                    <label for="username">用户名</label>
                    <input type="text" class="form-control" id="username" name="username"
                           value="{{ userinfo.username }}">
                    <p></p>
                </div>
                <div class="form-group">
                    <label for="gender">性别</label>
                    <select value=‘{{ userinfo.gender }}’’ name="gender"  style="width:100px;font-size: 20px;">
                        <option value="{{ userinfo.gender }}" name="sex">{{ userinfo.gender }}</option>
                        {% for gend in gend_dict.values %}
                        <option value="{{ gend }}" name="sex">{{ gend }}</option>
                        {% endfor %}
                    </select>
                </div>
                <div class="form-group">
                    <label for="phone">电话</label>
                    <input type="text" class="form-control" disabled="disabled" id="mobile_phone" name="mobile_phone"
                           value="{{ userinfo.mobile_phone }}">
                </div>
                <div class="form-group">
                    <label for="phone">邮箱</label>
                    <input type="text" class="form-control" disabled="disabled" id="email" name="email"
                           value="{{ userinfo.email }}">
                </div>
                <div class="form-group">
                    <label for="phone">地址</label>
                    <input type="text" class="form-control" id="address" name="address"
                           value="{{ userinfo.address }}">
                </div>
                <div class="form-group">
                    <label for="desc">简介</label>
                    <textarea type="text" class="form-control" id="detail" name="detail"
                              rows="12">{{ userinfo.detail }}</textarea>
                </div>
                <div style="text-align: center;">
                    <button type="submit" class="btn btn-primary" style="text-align: center;">修改</button>
                </div>

            </div>
        </form>
    </div>


{% endblock %}

{% block js %}
    <script>


    </script>

{% endblock %}